<template>
	<view class="template-product">
		<loadingPage v-show="loadingPage"></loadingPage>
		<view v-show="!loadingPage">
			<!-- 地址 -->
			<view class="bg-color tn-flex tn-flex-col-center dizhi" v-if="detail.type==0"
				@click="navigateToFn({ url: '/shopPages/address?type=1', checkLogin: true })">
				<image src="/static/index/dizhiIcon.png" class="left" mode=""></image>
				<view class="center">
					<view class="name" v-if="!address_id">暂无地址</view>
					<view class="name tn-text-ellipsis" v-else>{{dizhi.address}} {{dizhi.housenumber}}</view>
					<view class="city" v-if="!address_id">请先添加收货地址</view>
					<view class="city" v-else>{{dizhi.name}} {{dizhi.mobile}}</view>
				</view>
				<image src="/static/index/right.png" mode="" class="right"></image>
			</view>
			<!-- 商品 -->
			<view class="bg-color m-top goods tn-flex tn-flex-col-center">
				<view class="left">
					<image :src="img" mode="" class="goods-image"></image>
				</view>
				<view class="right tn-flex tn-flex-direction-column tn-flex-row-between">
					<view class="goods-name tn-text-ellipsis-2">{{detail.goods_name}}</view>
					<view class="price-num tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="goods-price">
							<text class="p1">￥</text>
							<text class="p2">{{detail.shop_price}}</text>
						</view>
						<text class="goods-num">x{{num}}</text>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="bg-color m-top beizhu tn-flex tn-flex-col-center">
				<text class="label">买家留言</text>
				<input type="text" v-model="beizhu" placeholder="无留言" placeholder-class="pClass" />
				<image src="/static/index/right.png" mode=""></image>
			</view>
			<!-- 价格 -->
			<view class="bg-color m-top z-price tn-flex tn-flex-direction-column tn-flex-row-around">
				<view class="g-prcie tn-flex tn-flex-row-between">
					<text class="label">商品金额</text>
					<text class="label p1">￥{{detail.shop_price}}</text>
				</view>
				<view class="g-prcie tn-flex tn-flex-row-between">
					<text class="label">合计</text>
					<text class="label p2">￥{{plPrice}}</text>
				</view>
			</view>
			<!-- 支付选择 -->
			<view class="pay-list bg-color m-top">
				<view class="title">支付方式</view>
				<view class="list">
					<view class="item tn-flex tn-flex-col-center tn-flex-row-between" @click="selectPay(1)">
						<view class="item-left tn-flex tn-flex-col-center">
							<image src="/static/index/wx.png" class="wxIcon" mode=""></image>
							<text>微信支付</text>
						</view>
						<view class="item-right">
							<image src="/static/index/pitchon.png" mode="" v-if="payIndex == 1"></image>
							<image src="/static/index/unselected.png" mode="" v-else></image>

						</view>
					</view>
					<view class="item tn-flex tn-flex-col-center tn-flex-row-between" @click="selectPay(2)">
						<view class="item-left tn-flex tn-flex-col-center">
							<image src="/static/index/alipay.png" class="alipayIcon" mode=""></image>
							<text>支付宝支付</text>
						</view>
						<view class="item-right">
							<image src="/static/index/pitchon.png" mode="" v-if="payIndex == 2"></image>
							<image src="/static/index/unselected.png" mode="" v-else></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="foot tn-flex tn-flex-col-center tn-flex-row-right">
				<view class="foot-left">
					<view class="price">
						<text class="p1">￥</text>
						<text class="p2">{{plPrice}}</text>
					</view>
					<view class="num">共{{num}}件</view>
				</view>

				<view class="btn" @click="onButtonClick">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taocanname: '',
				taocan: 0,
				dizhi: [],
				address_id: 0,
				detail: [],
				body: [],
				id: 0,
				beizhu: '',
				img: '',
				payIndex: 1,
				plPrice: 0,
				loadingPage: true,
				num: 0
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.num = option.num
			if (option.taocan) {
				this.taocan = option.taocan
			}
			this.info()
			this.getaddress()
			let that = this;
			uni.$on('addxuanze', function(data) {
				that.address_id = data.id
				that.dizhi = data
			})
		},
		methods: {
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/shop/shopDetail',
					data: {
						goods_id: this.id
					}
				});
				if (result.data.code == 200) {
					this.body = result.data.data
					this.detail = result.data.data.detail
					this.img = this.detail.images[0]
					if (this.taocan > 0) {
						this.taocanname = this.detail.spec.spec_goods_price[this.taocan].key_name
						this.detail.shop_price = this.detail.spec.spec_goods_price[this.taocan].shop_price
					}
					this.plPrice = this.num * this.detail.shop_price
					this.loadingPage = false
				}
			},
			selectPay(index) {
				this.payIndex = index
			},
			async getaddress() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/shop/moren',
					data: {}
				});
				if (result.data.code == 200) {
					if (result.data.data.id) {
						this.dizhi = result.data.data
						this.address_id = result.data.data.id
					}

				}

			},




			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},




			async onButtonClick(e) {

				if (this.detail.type == 0 && !this.address_id) {
					this.msg('请选择地址')
					return
				}
				this.post()

			},
			async post() {
				console.log('进来了')
				let that = this;
				// #ifdef APP
				if (this.payIndex == 2) {
					var url = '/api/shop/alipay_shop';
				} else {
					var url = '/api/shop/wxpay_shop';
				}

				const params = {
					address_id: this.address_id,
					id: this.id,
					num: this.num,
					goods_img: this.img,
					beizhu: this.beizhu,
					taocan: this.taocan,
				}
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: url,
					data: params
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.requestPayment({
							provider: this.payIndex == 1 ? 'wxpay' : 'alipay',
							orderInfo: result.data.data, //支付宝订单数据
							success: function(res) {
								console.log('=支付返回=', res)
								if (res.errMsg == 'requestPayment:ok') {

									uni.redirectTo({
										url: '/shopPages/order_show?id=' + result.data.msg
									})

									//uni.navigateBack()
								} else {
									console.log('fail:' + JSON.stringify(res));
								}
							},
							fail: error => {
								console.log("【requestPayment失败】", error)
								// 微信/支付宝错误码对照https://ask.dcloud.net.cn/article/286
								// 微信
								if (this.payIndex == 1) {
									if (/canceled/g.test(error.errMsg) || /-2/g.test(error.errMsg)) {
										uni.showToast({
											title: "取消支付",
											icon: "none"
										})
										return
									}
									if (/未安装/g.test(error.errMsg) && error.code == -8) {
										uni.showToast({
											title: "请先安装微信",
											icon: "none"
										})
										return
									}

									uni.showModal({
										title: "支付失败",
										content: error.errMsg || "调起支付失败，请稍后重试"
									})
									return
								}

								// 支付宝
								if (/62001/g.test(error.errMsg) || /6001/g.test(error.errMsg)) {
									uni.showToast({
										title: "取消支付",
										icon: "none"
									})
									return
								}

								uni.showModal({
									title: "支付失败",
									content: error.errMsg || "调起支付失败，请稍后重试"
								})
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif


				// #ifdef MP||H5
				//微信小程序

				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/api/shop/wxpay_shop_xcx',
					data: {
						address_id: this.address_id,
						id: this.id,
						num: this.num,
						goods_img: this.img,
						beizhu: this.beizhu,
						taocan: this.taocan,
					}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						let paycanshu = JSON.parse(result.data.data.pay)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: paycanshu.timeStamp,
							nonceStr: paycanshu.nonceStr,
							package: paycanshu.package,
							signType: 'MD5',
							paySign: paycanshu.paySign,
							success: function(res) {
								uni.redirectTo({
									url: '/shopPages/order_show?id=' + result.data.msg
								})

							},

						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif
			},



		}
	}
</script>

<style lang="scss" scoped>
	.template-product {
		padding: 24rpx 32rpx 0 32rpx;

		.bg-color {
			background-color: #fff;
			border-radius: 12rpx;
		}

		.m-top {
			margin-top: 16rpx;
		}

		.dizhi {
			height: 154rpx;
			padding: 0 24rpx;

			.left {
				width: 80rpx;
				height: 80rpx;
			}

			.center {
				flex: 1;
				padding-left: 24rpx;

				.name {
					width: 500rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.city {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333ad;
					margin-top: 8rpx;
				}
			}

			.right {
				width: 16rpx;
				height: 27rpx;
			}
		}

		.goods {
			height: 208rpx;
			padding: 0 24rpx;

			.left {
				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 15rpx;
				}
			}

			.right {
				height: 160rpx;
				padding-left: 24rpx;

				.goods-name {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.price-num {
					.goods-price {
						color: #e83a30;
						font-weight: Heavy;

						.p1 {
							font-size: 24rpx;
						}

						.p2 {
							font-size: 40rpx;
						}
					}

					.goods-num {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333ad;
					}
				}
			}

		}

		.label {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.beizhu {
			height: 88rpx;
			padding: 0 24rpx;

			image {
				width: 14rpx;
				height: 24rpx;
			}

			input {
				flex: 1;
				text-align: right;
				padding-right: 14rpx;
				color: #333333;
			}

			.pClass {
				font-size: 28rpx;
				font-weight: 400;
				color: #CCCCCC;
			}
		}

		.z-price {
			height: 152rpx;
			padding: 0 24rpx;

			.p2 {
				color: #e83a30;
			}
		}

		.pay-list {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding: 24rpx 24rpx 0 24rpx;

			.list {
				.item {
					height: 100rpx;

					.item-left {
						.wxIcon {
							width: 48rpx;
							height: 42rpx;
						}

						.alipayIcon {
							width: 48rpx;
							height: 48rpx;
						}


						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
							margin-left: 22rpx;
						}
					}

					.item-right {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}
			}
		}

		.foot {
			height: 100rpx;
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.foot-left {
				margin-right: 24rpx;
				text-align: right;
			}

			.price {
				color: #e83a30;
				font-weight: bold;

				.p1 {
					font-size: 24rpx;
				}

				.p2 {
					font-size: 40rpx;
				}
			}

			.num {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}

			.btn {
				width: 216rpx;
				height: 100rpx;
				background: linear-gradient(270deg, #DB89F5 0%, #834BF4 100%);
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.custom-modal-content {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
			color: $tn-main-color;
		}

		.text {
			font-size: 40rpx;
		}
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 750rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 内容图 start */
	.content-backgroup {
		z-index: -1;

		.backgroud-image {
			border-radius: 15rpx;
			width: 100%;
		}
	}

	/* 内容图 end */

	/* 商家商品 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 10rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #E83A30;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 24rpx;
			padding-right: 5rpx;
		}
	}

	.image-book {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-picbook {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 15rpx 15rpx 0 0;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;

		width: 160rpx;
		height: 150rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		width: 100%;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-3 {
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>